<template>
    <section>
        <div class="search-logo">
            <img src="@/assets/bing.png" alt="">
            <span>bing</span>
        </div>
        <el-input class="search-text" v-model="searchText" placeholder="Bing搜索" size="large" clearable @change=""
            :prefix-icon="Search">
        </el-input>
    </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const searchText = ref()
</script>

<style lang="scss" scoped>
section {
    display: flex;
    flex-direction: column;
    align-items: center;

    .search-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;

        img {
            width: 100px;
            height: 100px;
        }

        span {
            color: #367ba6;
            font-size: 70px;
            text-transform: capitalize;
            letter-spacing: 4px;
            margin-right: 40px;
        }
    }

    .search-text {
        width: 50vw;
        margin: 12px auto;
    }
}
</style>